<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>10-04Css3盒模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 
            W3C中就是content+padding+border
            IE6和模型中包括border+padding真实宽高要小于等于自定义的宽高 */
        /* 
            css3中有一个可以选择盒模型的属性。
            box-sizing:border-box/content-box
            content-box为W3C标准盒子（content+padding+border）
            border-box为IE6混杂模式的盒子 设置了高度就是这么大不会追加border和padding而增加盒子的大小
         */
         

        .w3cdemo {
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 20px solid red;
            background: black;
            margin-bottom: 20px;
            /* 默认为box-sizing:content-box */
            box-sizing: content-box;
        }

        .ie6demo {
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 20px solid red;
            background: black;
            box-sizing: border-box;
        }

        /* float */
        .wrapper {
            width: 100%;
            height: 100%;
        }

        .left {
            float: left;
            width: 200px;
            height: 100px;
            background: violet;
        }

        .midd {
            float: left;
            height: 100px;
            width: calc(100% - 400px);
            background: tomato;
        }

        .right {
            float: right;
            width: 200px;
            height: 100px;
            background: orange;
        }

        /* position布局 */
        .wrapper2 {
            width: 100%;
            height: 100%;
            border: 1px solid red;
            position: relative;
        }

        .left2 {
            width: 200px;
            height: 100px;
            background: violet;
            position: absolute;
            top: 0;
            left: 0;
        }

        .midd2 {
            height: 100px;
            background: tomato;
        }

        .right2 {
            width: 200px;
            height: 100px;
            background: blueviolet;
            position: absolute;
            top: 0;
            right: 0;
        }
        .flex1 {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            display: flex;
        }
        .left3 {
            width: 200px;
            height: 200px;
            background: blue;
            /* 
                flex-shrink:0为不收缩
                损失的长度为200*3 - 500 = 100;
                100/3 = 33.33
                flex-shrink:1 200-33.33 = 166.66
             */
            flex-shrink: 0;
        }
        .midd3 {
            width: 200px;
            height: 200px;
            background:springgreen;
             /* 
                flex-shrink:0为不收缩
                损失的长度为200*3 - 500 = 100;
                100/3 = 33.33
                flex-shrink:1 200-33.33 = 166.66
             */
            flex-shrink: 1;
            /* 
                单个布局self自己
             */
            align-self: flex-end
        }
        .right3 {
            width: 200px;
            height: 200px;
            background:maroon;
             /* 
                flex-shrink:0为不收缩
                损失的长度为200*3 - 500 = 100;
                100/3 = 33.33
                flex-shrink:2 200-33.33*2 = 133.33
             */
            flex-shrink: 2;
        }
    </style>
</head>

<body>
    <div class="w3cdemo"></div>
    <div class="ie6demo"></div>
    <div class="wrapper2">
        <div class="left2"></div>
        <div class="midd2"></div>
        <div class="right2"></div>
    </div>
    <div class="wrapper">
        <div class="left"></div>
        <div class="midd"></div>
        <div class="right"></div>
    </div>
    <div class="flex1">
        <div class="left3"></div>
        <div class="midd3"></div>
        <div class="right3"></div>
    </div>
</body>

</html>